<template>
  <div class="home">
    <!-- 导航栏 -->
    <van-nav-bar class="app-nav-bar">
      <van-button 
        slot="title" 
        icon="search" 
        type="info"
        round
        class="search-btn"
        size="small"
        to="/search"
      >
        搜索
      </van-button>
    </van-nav-bar>
    <!-- 导航栏结束 -->
    <!-- 文章频道列表 -->
    <!-- 标签页组件有一个功能，只有你第一次查看标签页的时候才会渲染里面的内容 -->
    <van-tabs v-model="active">
      <van-tab 
        v-for="channel in channels"
        :key="channel.id"
        :title="channel.name"
      >
        <!-- 文章列表 -->
        <ArticleList :channel="channel" />
        <!-- 文章列表结束 -->
      </van-tab>
      <!-- 汉堡按钮定位把列表最后的位置给挡住了，
	  解决办法就是在这里添加一个占位符 -->
      <div
        slot="nav-right"
        class="wap-nav-placeholder"
      />
      <div
        slot="nav-right"
        class="wap-nav-wrap"
      >
        <van-icon 
          name="wap-nav"
          @click="isChannelEditShow=true"
        />
      </div>
    </van-tabs>
    <!-- 文章频道列表 结束-->
    <van-popup 
      v-model="isChannelEditShow" 
      position="bottom"
      class="channel-popup"
      closeable
      close-icon-position="top-left"
      get-container="body"
    >
      <!-- 
	 模板中的事件参数 --$event
	 -->
      <channel-edit 
        :user-channels="channels"
        :active="active"
        @close="isChannelEditShow = false"
        @updata-active="active = $event"
      />
    </van-popup>
  </div>
</template>

<script>
	import { getUserChannels } from '../../api/user'
	import articleList from './articleList/articleList'
	import ChannelEdit from './articleList/channel-edit'
	import { mapState } from 'vuex'
	import { getItem } from '@/utils/storage'
	export default {
		name:'Home',
		components:{
			ArticleList:articleList,
			ChannelEdit
		},
		data: () => {
			return{
				active: 0,
				channels:[],
				isChannelEditShow:false
			}
		},
		computed:{
			...mapState(['user'])
		},
		// 生命周期 在实例创建完成后被立即调用
		created(){
			this.loadChannels()
		},
		methods:{
			async loadChannels(){
				let channels = []
				if(this.user){
					//已登录，请求获取线上的用户频道列表数据
					const {data} = await getUserChannels()
					 channels = data.data.channels
				}else{
					//没有登录，判断是否有本地存储的频道列表数据
					const localChannels = getItem('user-channels')
					//如果由本地存储的频道列表则使用
					if(localChannels){
						channels = localChannels
					}else{
						//用户没有登录，也没有本地存储的列表，那就请求推荐的频道列表
					     const {data} = await getUserChannels()
					     channels = data.data.channels
					}
					
				}
				//把处理好的数据放到 data 中以供模板使用
				this.channels = channels
				//请求获取频道数据
			// 	const {data} = await getUserChannels()
			// 	 // console.log(data)
			// 	 this.channels = data.data.channels
			// },
			
		}
		// 更改active
		//  onUpdataActive(index){
		// 	this.active = index
		// }
	},
	}
</script>

<style scoped lang="less">
	
	/deep/.van-nav-bar__title{
		 max-width: unset;
		 .search-btn{
		 	width: 277px;
		 	height: 32px;
		 	background-color: #5babfb;
		 	border: none;
			.van-button__icon{
				font-size: 16px;
			}
			.van-button__text{
				font-size: 14px;
			}
		 }
		
	}
	/deep/.van-tab{
	 	border-right: 1px solid #edeff3;
	 	border-bottom:1px solid #edeff3;
	 }
	 /deep/.van-tabs__line{
		 width: 15px;
		 height: 3px;
		 background-color: #3296f6;
		 bottom: 20px;
	 }
	 .channel-popup{
		 height: 100%;
	 }
	.wap-nav-wrap{
		 position: fixed;
		 right: 0;
		 height: 44px;
		 display: flex;
		 width: 33px;
		 height: 43px;
		 justify-content: center;
		 align-items: center;
		 background-color:#ffffff;
		 opacity: .9;
		.van-icon{
			font-size: 24px;
		}
		&:before{
			content:'';
			width: 1px;
			height: 43px;
			background: url(../../image/形状2拷贝3.png) no-repeat;
			background-size: contain;
			position: absolute;
			left: 0px;
			top: 0px;
		}
	}
	.wap-nav-placeholder{
		width: 33px;
		flex-shrink: 0;
	}
</style>
